<template>
	<view class="pickAvatar">
		<view class="title-box" :style="{ 'padding-top': inf0Pt + 'vh' }">
			<view class="back">
				<image class="icon" @tap="back" :src="imgPath + 'AICont/back-arrow2.svg'" mode="widthFix"></image>
			</view>
			<view class="title">数字人</view>
			<view @tap="dingzhi" class="right-text">
				<image class="pic" :src="imgPath + 'index/MakeAvatar.gif'" mode="widthFix"></image>
				<view class="text">定制数字人</view>
			</view>
		</view>
		<view class="content-main">
			<view class="tabbar-box" @tap.stop="">
				<view class="tabbar">
					<view :class="['tabbar-item', '_page4', tabbarAc2 == item.id ? 'ac' : '']" v-for="(item, index) in tabbarList2" :key="index" @click="changeTabbarAc2({ item, index })">
						<view class="ac-v"></view>
						<view class="text">
							{{ item.humanModeTypeName }}
						</view>
					</view>
				</view>
			</view>
			<template>
				<scroll-view class="content-list" scroll-y @scrolltolower="contentListScroll">
					<custom-waterfalls-flow v-if="yushe.length != 0" ref="yusheRef" :value="yushe" :column="2" :columnSpace="1.5" :seat="2">
						<!-- #ifdef MP-WEIXIN -->
						<view class="content-item" v-for="(item, index) in yushe" :key="index" slot="slot{{index}}">
							<view class="show" @click="pickContentItem({ item, index })">
								<image class="pic" :src="item.speakerUrl" mode="widthFix"></image>
							</view>
							<view class="info">
								<view class="text">{{ item.speakerName }}</view>
							</view>
							<view class="tag" v-if="item.isVip">Vip</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<template v-slot:default="{ item, index }">
							<view class="content-item">
								<view class="show">
									<image class="pic" :src="item.speakerUrl" mode="widthFix" @click="pickContentItem({ item, index })"></image>
								</view>
								<view class="info">
									<view class="text">{{ item.speakerName }}</view>
								</view>
								<view class="tag" v-if="item.isVip">Vip</view>
							</view>
						</template>
						<!-- #endif -->
					</custom-waterfalls-flow>
					<view class="kong-page" v-else>
						<view class="kpic-box">
							<image class="k-pic" :src="imgPath + 'index/kongPage.svg'" mode="widthFix"></image>
							<view class="text">暂无数据</view>
						</view>
					</view>
				</scroll-view>
			</template>
		</view>
		<LoginDialog ref="LoginDialog" :show="LoginDialogShow" @successFn="loginDialogShowSucc" @changeShow="changeLoginDialogShow" style="z-index: 999"></LoginDialog>
	</view>
</template>

<script>
import { tools } from "@/utils/util.js";
import * as api from "@/api/createVideo.js";

let timer = null;
export default {
	name: "pickAvatarView",
	data() {
		return {
			imgPath: tools.imgPath,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			inf0Pt: 0,
			LoginDialogShow: false,
			pageTabbarAc: 0,
			pageTabbarList: [],
			tabbarAc: 0,
			tabbarList: [],
			tabbarAc2: null,
			tabbarList2: [],
			contentList: [],
			yusheCurrent: 1,
			yusheSize: 10,
			yusheTotal: null,
			yushe: [],
			gerenCurrent: 1,
			gerenSize: 10,
			gerenTotal: null,
			geren: []
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 9.6;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 监听登录弹出层显示
		changeLoginDialogShow(val) {
			this.LoginDialogShow = val;
		},
		// 登陆成功数据刷新
		loginDialogShowSucc() {
			this.initGetData();
		},
		// 定制数字人
		dingzhi() {
			uni.setStorageSync("toHome", {
				footerBarListAc: 2
			});
			uni.reLaunch({
				url: "/pages/index/index"
			});
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 滚动事件(做懒加载)
		contentListScroll(event) {
			const that = this;
			if (timer) clearTimeout(timer);
			timer = setTimeout(async () => {
				if (that.tabbarAc == 0) {
					if (this.yusheTotal === this.yushe.length) return;
					this.yusheCurrent++;
					await this.getAvatarData();
				} else {
					if (this.gerenTotal === this.geren.length) return;
					this.gerenCurrent++;
					await this.getAvatarData2();
				}
				clearTimeout(timer);
				timer = null;
			}, 300);
		},
		//选择模特
		pickContentItem({ item, index }) {
			if (item.isVip) {
				let userInfo = uni.getStorageSync("userInfo");
				if (userInfo) {
					userInfo = JSON.parse(userInfo);
					if (!userInfo.vipName) return tools.easyToast("请先购买会员！");
				}
			}
			index = this.yushe.findIndex((e) => e.id == item.id);
			index = index || 0;
			item = item || this.yushe[0];
			uni.setStorageSync("avatar", {
				id: item.id,
				index,
				updateType: "PickAvatar"
			});
			this.toPage("/pages/createVideo/createVideo");
		},
		//切换模特子类型
		changeTabbarAc2({ item, index }) {
			this.tabbarAc2 = item.id;
			this.yusheCurrent = 1;
			this.yushe = [];
			this.yusheTotal = null;
			this.getAvatarData(this.tabbarAc2);
		},
		// 获取公共模特分类api
		async getAvatarClassificationData() {
			let classification = await api.getQmsUserHumanModelTwoType({
				humanModeType: 0
			});
			if (!classification) return;
			this.tabbarList2 = [
				{
					id: null,
					humanModeTypeName: "全部"
				},
				...classification.data
			];
			this.tabbarAc2 = this.tabbarList2[0].id;
			return true;
		},
		// 获取公共模特Api
		async getAvatarData(_id) {
			let sand = {
				id: _id,
				size: this.yusheSize,
				current: this.yusheCurrent
			};
			if (!_id) delete sand.id;
			let AvatarData = await api.getQmsUserHumanModelById(sand);
			if (!AvatarData?.data?.records) {
				this.yushe = [];
				return;
			}
			this.yusheTotal = AvatarData.data.total;
			let yushe = AvatarData.data.records.map((e) => {
				// let img = new Image();
				// img.onload = () => {
				// 	console.log(e.speakerName, '加载完成！');
				// };
				return {
					...e,
					name: e.speakerName,
					image: e.speakerUrl,
					hide: true,
					isVip: e.vipStatus == 1
				};
			});
			this.yushe = [...this.yushe, ...yushe];
			return true;
		},
		// 获取私有模特Api
		async getAvatarData2() {
			let sand = {
				size: this.gerenSize,
				current: this.gerenCurrent
			};
			let AvatarData = await api.getQmsUserHumanModelByMyself(sand);
			if (!AvatarData?.data?.records) {
				this.geren = [];
				return;
			}
			this.gerenTotal = AvatarData.data.total;
			let geren = AvatarData.data.records.map((e) => {
				return {
					...e,
					name: e.speakerName,
					isVip: e.vipStatus == 1
				};
			});
			this.geren = [...geren];
			return true;
		},
		// 获取后端数据
		async initGetData() {
			let getAvatar = new Promise(async (next) => {
				let flag = await this.getAvatarClassificationData();
				if (!flag) return;
				let flag2 = await this.getAvatarData();
				if (!flag2) return;
				next(true);
			});
			await Promise.all([getAvatar]);
			return true;
		},
		//跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		}
	},
	created() {
		this.initSystemInfo();
		this.initGetData();
	},
	mounted() {},
	onShareAppMessage: function (res) {
		// 如果要自定义分享内容，可以设置shareTicket和query参数
		let pathInfo = ``;
		let userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
		let inviteInfo = userInfo?.detailInfo?.inviteUrl;
		if (inviteInfo) {
			inviteInfo = userInfo?.detailInfo?.inviteUrl.slice(inviteInfo.indexOf("?") + 1);
		}
		let path = `/pages/pickAvatar/pickAvatar?${inviteInfo}`;
		console.log(path);
		return {
			title: tools.companyName + "数字人",
			path: `/pages/pickAvatar/pickAvatar`
			// imageUrl: "/static/share.jpg" // 分享卡片的图片
		};
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0vw !important;
	height: 0vw !important;
	display: none;
}
.pickAvatar {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10vw 2vw 0vw;

		.back {
			flex: 1;
			display: flex;
			justify-content: start;
			align-items: center;
			.icon {
				width: 8vw;
			}
		}

		.title {
			font-size: 42rpx;
			font-weight: 700;
			flex: 1;
			color: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.right-text {
			font-size: 30rpx;
			font-weight: 400;
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			border-radius: 3vw;
			// color: #fff;
			// background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
			.pic {
				width: 10vw;
				height: 10vw;
				display: block;
			}
		}
	}
	.content-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.tabbar-box {
			display: flex;
			overflow: hidden;
			position: sticky;
			top: 0vw;
			z-index: 10;
			// background: #070709;
			// background: radial-gradient(rgba(2, 34, 46, 1) 0%, rgba(2, 34, 46, 1) 100%);

			.tabbar {
				flex: 1;
				width: 100vw;
				// height: 6vw;
				display: -webkit-box;
				margin: 2vw 0vw;
				overflow: auto;
				&::-webkit-scrollbar {
					width: 0vw !important;
					height: 0vw !important;
					display: none;
				}
				.tabbar-item {
					width: max-content;
					padding: 1vw 3vw;
					margin: 0vw 0.5vw;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					font-size: 3.2vw;
					font-weight: 400;
					letter-spacing: 0px;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					vertical-align: top;
					flex-direction: column;
					border-radius: 100vw;
					background: rgba(255, 255, 255, 0.2);
					color: #000;

					&.ac {
						// border-bottom: 4px solid #00997F;
						background: rgba(0, 153, 127, 1);
						color: #fff;
					}

					.icon {
						width: 10vw;
						height: 10vw;
						display: block;
					}
				}
			}
		}
		.content-list {
			overflow: auto;
			flex: 1;
			box-sizing: border-box;
			padding: 0vw 3vw;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-around;

			.content-item {
				width: 46vw;
				// height: 79vw;
				display: flex;
				// border-radius: 3vw;
				flex-direction: column;
				overflow: hidden;
				position: relative;
				// margin: 0vw 0vw 3vw;
				background: #fffafc;
				border: 1px solid #f8f8f8;
				position: relative;

				.show {
					width: 100%;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #ffffff52;
					position: relative;

					.pic {
						width: 100%;
						// height: 100%;
					}

					.loading {
						position: absolute;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.68);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.loading-gif {
							width: 68%;
						}

						.schedule {
							text-align: center;
						}
					}
				}

				.info {
					width: 100%;
					position: absolute;
					bottom: 0px;
					left: 0px;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(0deg, #000, transparent);

					.text {
						font-size: 36rpx;
						color: #fff;
					}
				}
				.tag {
					position: absolute;
					top: 0vw;
					right: 0vw;
					box-sizing: border-box;
					padding: 3vw 2vw;
					border-radius: 0vw 3vw 0vw 3vw;
					background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 16rpx;
					color: #fff;
				}
			}

			.kong-page {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #000;
				.kpic-box {
					width: 100%;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					.k-pic {
						margin: 0vh auto 8.6vh;
						width: 52%;
					}
					.text {
						font-size: 3vw;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 20.27px;
						color: rgba(153, 153, 153, 1);
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 20vw;
					}
				}
			}
		}
	}
}
</style>
